<template>
    <view>
        <!-- <custom-header title="数据中心" /> -->
        <view class="dashboard">
            <view class="topBox">
                <view class="topBox-item">
                    <view class="title" style="display: flex;align-items: center;" >
                        <image src="/static/images/data_oneIcon.png" mode="" style="width: 40rpx;height: 40rpx;" />
                        <view style="display: flex;align-items: center;font-size: 28rpx;color: #202020;">总收入(元)</view>
                    </view>
                    <view class="number">
                        <!-- 99,888,669 -->
                        <view>{{ dataObj.totalAmount }}</view>
                    </view>
                    <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;">
                        <view class="tagAdd">
                            +￥151,11
                        </view>
                        <view style="display: flex;align-items: center;font-size: 26rpx;color: #202020;">
                            明细
                            <uni-icons type="right" size="16" color="#202020"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="topBox-item">
                    <view class="title" style="margin-bottom: 20rpx;display: flex;align-items: center;">
                        <image src="/static/images/data_oneIcon.png" mode="" style="width: 40rpx;height: 40rpx;" />
                        <view style="display: flex;align-items: center;font-size: 26rpx;justify-content: space-between;width: 100%;" >
                            当{{array[index]}}营业额(元)
                            <picker @change="bindPickerChange" :value="index" :range="array">
                                <text class="tag" style="margin-left: 6rpx;">{{array[index]}}</text>
                            </picker>
                        </view>
                    </view>
                    <view class="number" style="margin-bottom: 20rpx;" >{{ dataObj.todayAmount }}</view>

                    <view class="item-row" style="display: flex;align-items: center;justify-content: space-between;">
                        <view class="tagLoss">
                            -￥151,111
                        </view>
                        <view style="display: flex;align-items: center;font-size: 26rpx;color: #202020;">
                            明细
                            <uni-icons type="right" size="16" color="#202020"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
            <view v-for="(item,index) in cardList" :key="index" class="centerItemBox">
                <view class="title_row">
                    <view class="title_row_title">助教收益</view>
                    <view style="display: flex;align-items: center;font-size: 26rpx;color: #202020;">
                        明细
                        <uni-icons type="right" size="16" color="#202020"></uni-icons>
                    </view>
                </view>
                <view class="c-item-box"  >
                    <view class="c-item">
                        <view class="label">充值收入</view>
                        <view class="value">￥{{ dataObj.rechargeAmount }}</view>
                    </view>
                    <view class="c-item">
                        <view class="label">会员卡收入</view>
                        <view class="value">￥{{ dataObj.bayCardAmount }}</view>
                    </view>
                </view>
            </view>

            
            <view class="centerItemBox">
                <view class="title">台球</view>
                <view class="c-item-box" style="justify-content: space-between;" >
                    <view class="c-item">
                        <view class="label">助教收入</view>
                        <view class="value">￥{{ dataObj.tutorAmount }}</view>
                        <view style="height: 6rpx;" ></view>
                        <view class="label">累计时长</view>
                        <view class="value">{{ formatMinutesToTime(dataObj.tutorTotalTime) }}</view>
                    </view>
                    <view class="c-item">
                        <view class="label">台费收入</view>
                        <view class="value">￥{{ dataObj.tableFeeAmount }}</view>
                        <view style="height: 6rpx;" ></view>
                        <view class="label">累计时长</view>
                        <view class="value">{{ formatMinutesToTime(dataObj.tableTotalTime) }}</view>
                    </view>
                </view>
            </view>

            <view class="centerItemBox">
                <view class="title">其他信息</view>
                <view class="c-item-box" style="justify-content: space-between;" >
                    <view class="c-item">
                        <view class="label">商品收入</view>
                        <view class="value">￥{{ dataObj.goodsAmount }}</view>
                    </view>
                    <view class="c-item">
                        <view class="label">饮品收入</view>
                        <view class="value">￥{{ dataObj.drinkAmount }}</view>
                    </view>
                    <view class="c-item">
                        <view class="label">餐饮收入</view>
                        <view class="value">￥{{  dataObj.dishAmount  }}</view>
                    </view>
                    <view class="c-item">
                        <view class="label">游戏收入</view>
                        <view class="value">￥{{  dataObj.gameAmount }}</view>
                    </view>
                </view>
            </view>

            <!-- <view class="centerBox">
                <view class="centerItemBox" v-for="(item, index) in dataObj.data" :key="index">
                    <view class="title">{{ item.name }}</view>

                    <view class="c-item-box">
                        <view class="c-item" v-for="(items, index1) in item.detailData" :key="index1">
                            <view class="label">{{ items.name }}</view>

                            <view class="value">{{ items.value }}</view>
                        </view>
                    </view>
                </view>
            </view> -->
            <view class="kingListBox centerItemBox">
                <view class="king-title title" style="display: flex;align-items: center;justify-content: space-between;" >助教排行
                    <text @click="goTutorList" style="font-size: 26rpx;color: #666;margin-left: 10rpx;" >更多</text>
                </view>
                <view class="kingListBox">
            <view class="table-header">
                <view class="header-item rank">排名</view>
                <view class="header-item name">姓名</view>
                <view class="header-item amount">总金额</view>
                <view class="header-item time">总时长(小时)</view>
            </view>
            <view class="z-item" v-for="(item, index) in kingList" @click="goTutorDetail(item)" :key="index">
                <view class="kingState" style="text-align: center;" v-if="index >= 3" >{{ index + 1 }}</view>

                <view class="kingState" v-if="index === 0">
                    <image class="king-img" src="@/static/images/king1.png" mode="" />
                </view>

                <view class="kingState" v-if="index === 1">
                    <image class="king-img" src="@/static/images/king2.png" mode="" />
                </view>

                <view class="kingState" v-if="index === 2">
                    <image class="king-img" src="@/static/images/king3.png" mode="" />
                </view>

                <view class="userBox" style="display: flex;align-items: center;justify-content: space-between;width: 90%;" >
                    <view class="userInfoBox" style="display: flex;align-items: center;justify-content: center;" >
                        <image class="userimg" :src="item.imageUrl" mode="" />
                        <view class="userName" style="margin-left: 10rpx;">{{ item.tutorName }}</view>
                    </view>
                    <view class="money" style="text-align: right;">￥{{ item.income }}</view>
                    <view class="time">{{ item.workTime }}</view>
                </view> 
            </view>
        </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { getTutorRank,getReportList } from '@/api/dataCenter/index'
import { getListReport } from '@/api/dataCenter/index'

const cardList = ref([
    {
        name: '助教收益',
        type: 'tutor'
    },
    {
        name: '台球收益',
        type: 'table'
    },
    {
        name: '其他收益',
        type: 'other'
    }
])

// 响应式数据
const kingList = ref([])
const dataObj = ref({
    totalTurnover: 0,
    todayTurnover: 0,
    data: [
        {
            // name:
        }
    ]
})

const currentDate = ref('')
const getCurrentDate = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    currentDate.value = `${year}年${month}月${day}日`
}
getCurrentDate()

const array = ['日','周', '月', '年']
const index = ref(0)
const bindPickerChange = (e) => {
    index.value = e.detail.value
    getDataList(Number(e.detail.value) + 1 + '')
    console.log(e.detail.value + 1)
}


// 获取助教数据
const getTouorDataList = async () => {
    const res = await getTutorRank()
    if (res.code == 200) {
        kingList.value = res.result
    } 
    
}

// 助教列表
const goTutorList = () => {
    uni.navigateTo({
        url: '/pages/teachDataCenter/teachList'
    })
}

// 获取数据中心数据
const getDataList = async (queryType = '1') => {
    const res = await getListReport({
        queryType
    })
    if (res.code  == 200) {
        dataObj.value = res.result
    } 
}

// 将分钟数转换为时分格式
const formatMinutesToTime = (minutes = 0) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return `${hours}小时${mins}分钟`
}


// 助教详情
const goTutorDetail = (item) => {
    if(item.userId) {   
        uni.navigateTo({
            url: '/pages/teachDataCenter/teachDataCenter?userId='+item.userId
        })
    } else {
        uni.showToast({
            title: '暂未登录',
            icon: 'none'
        })
    }
}

// 生命周期钩子
onLoad(() => {
    console.log('onLoad')
    getDataList()
    getTouorDataList()
})
</script>

<style scoped lang="scss">
.title_row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #202020;
    margin-bottom: 20rpx;
    align-items: center;
    .title_row_title{
        font-size: 32rpx;
        color: #202020;
        font-weight: bold;
    }
}
   
.table-header {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #eee;
    margin-bottom: 20rpx;
    font-weight: bold;
    color: #333;
}

.header-item {
    font-size: 28rpx;
}

.header-item.rank {
    width: 60rpx;
    text-align: center;
}

.header-item.name {
    width: 240rpx;
    text-align: center;
}

.header-item.amount {
    width: 160rpx;
    text-align: right;
}

.header-item.time {
    width: 160rpx;
    text-align: right;
    font-size: 18rpx;
}
.kingState{
    width: 10%;
    overflow: hidden;
}
.tag{
    width: 20rpx;
    height: 10rpx;
    line-height: 10rpx;
    background: #a1bcd4;
    margin-left: 6rpx;
    color: #fff;
    font-size: 24rpx;
    padding: 0 6rpx;
    border-radius: 4rpx;
}
.dashboard {
    padding: 30rpx;
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.topBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20rpx;
    color: #202020;
    font-size: 28rpx;
}

.topBox-item {
    flex: 1;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    padding: 20rpx;
}

.item-row {
    /* padding: 24rpx; */
}

.title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
.tagAdd{
    display: inline-block;
    padding: 0 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #0A7964;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: #F2FCFA;
}
.tagLoss{
    display: inline-block;
    padding: 0 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #FB3030;
    text-align: left;
    font-style: normal;
    text-transform: none;
    background: #FFF5F5;
}

.number {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
    font-weight: bold;
    font-size: 52rpx;
    color: #202020;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.centerItemBox {
    /* width: 100%; */
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-top: 30rpx;
    transition: all 0.3s ease;
}

.centerItemBox:hover {
    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
}

.centerItemBox .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 20rpx;
}



.c-item-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.c-item {
    flex: 1;
    width: 33.33%;
    padding: 20rpx;
    // background: #f0f7ff;

}

.c-item:hover {
    // background: #f0f7ff;
}

.label {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 12rpx;
}

.value {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.kingListBox {
    margin-top: 40rpx;
}
.kingListBox {
    margin-top: 40rpx;
}

.z-item {
    /* padding: 20rpx; */
    /* background: #f8fafc; */
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.userBox .userimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.userBox .userName {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
}

.money {
    font-weight: 600;
    color: #2c3e50;
}

.time {
    color: #666;
    font-size: 26rpx;
}

.king-img {
    width: 64rpx;
    height: 64rpx;
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
}


.tag {
    background: #3498db;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 500;
}
.teach-list{
    width: calc(100vw - 40rpx);
    min-height: 100vh;
    padding: 20rpx;
    background: linear-gradient( 180deg, #DFEBFF 0%, #FFFFFF 46%), linear-gradient( 268deg, #A4F9FF 0%, #E7E0FF 100%);
}

.kingListBox {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
}

.z-item {
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 0;
}

.kingState {
    width: 80rpx;
    text-align: center;
}

.userBox {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userInfoBox {
    width: 180rpx;
    display: flex;
    align-items: center;
}

.userBox .userimg {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.userBox .userName {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-left: 10rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.money {
    width: 200rpx;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

.time {
    width: 120rpx;
    color: #666;
    font-size: 26rpx;
    text-align: center;
}

.king-img {
    width: 64rpx;
    height: 64rpx;
    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
}

</style>
